@import "~scss/_mixins";

.menus {
	.menu.menuSelect {
		.content { transition: none; overflow: hidden; padding: 0px; }
		.items { height: 100%; overflow: auto; }

		.item { display: flex; align-items: center; }
		.item {
			.icon { flex-shrink: 0; }
			.name { width: 100%; @include text-overflow-nw; }
		}

		.item.isInitial { padding: 2px 16px; line-height: 18px; margin-bottom: 2px; }
		.item.isInitial {
			.name { text-transform: uppercase; @include text-very-small; }
		}
	}

	.menu.menuSelect.withFilter {
		.content { padding: 8px 0px 0px 0px; }
		.items { height: calc(100% - 30px); }
	}

	.menu.menuSelect.withAdd {
		.content { max-height: 378px; }
	}

	.menu.menuSelect.skip { width: var(--menu-width-value); }
	.menu.menuSelect.skip {
		.name { margin: 0px; width: calc(100% - 24px); @include text-overflow-nw; }
	}

	.menu.menuSelect.button {
		.item { white-space: nowrap; display: inline-block; margin-right: 16px; color: var(--color-control-active); font-weight: 500; }
		.item:hover { color: var(--color-text-primary); }
		.item:last-child { margin-right: 0px; }
	}

	.menu.menuSelect.center {
		.item { text-align: center; }
	}

	.menu.menuSelect.withFullDescripion {
		.content { overflow: auto; padding: 0px; }

		.item.withDescription { height: auto; }
		.item.withDescription {
			.iconObject { background-color: var(--color-shape-highlight-medium); }
			.descr { overflow: visible; white-space: normal; height: auto; }
		}
	}

	.menu.menuSelect.noScroll {
		.content { overflow: hidden; max-height: unset; }
	}

	.menu.menuSelect.noVirtualisation {
		.items { padding: 8px 0px; }
	}

	.menu.menuSelect.spaceSelect { width: var(--menu-width-set); }
	.menu.menuSelect.spaceSelect {
		.item { padding: 4px 16px; }
		.item {
			.icon.plus {
				border-radius: 8px; border: 1px solid var(--color-shape-secondary); background-color: var(--color-shape-highlight-light);
				background-image: url('~img/icon/popup/usecase/plus.svg'); width: 48px; height: 48px; background-size: 20px;
			}
			.iconObject, .icon { margin: 0px; }
			.iconObject.isSpaceView { border-radius: 8px !important; }
			.clickable { align-items: center; gap: 0px 12px; }
		}

		.item.add { gap: 0px 12px; }
	}

	.menu.menuSelect.spaceCreate { width: var(--menu-width-set); }
	.menu.menuSelect.spaceCreate {
		.content { height: auto !important; }

		.item { height: 64px; }
		.item {
			.info { padding-left: 58px !important; }

			.icon { width: 48px; height: 48px; }
			.icon.chat { background-image: url('~img/icon/menu/spaceCreate/chat.svg'); }
			.icon.space { background-image: url('~img/icon/menu/spaceCreate/space.svg'); }
			.icon.import { background-image: url('~img/icon/menu/spaceCreate/import.svg'); }
			.icon.join { background-image: url('~img/icon/menu/spaceCreate/join.svg'); }
		}
	}

	/* Type layout conflict */
	.menu.menuSelect.menuTypeLayout { width: var(--menu-width-icon); }

	/* Links, Backlinks */
	.menu.menuSelect.featuredLinks {
		.item {
			.info { width: 100%; }
			.iconObject { margin: 0px; background-color: var(--color-shape-highlight-medium); }
		}
	}

	/* Chat attachment */
	.menu.menuSelect.chatAttachment {
		.item {
			.icon.object { background-image: url('~img/icon/chat/attachment/object.svg'); }
			.icon.media { background-image: url('~img/icon/chat/attachment/media.svg'); }
			.icon.file { background-image: url('~img/icon/chat/attachment/file.svg'); }
		}
	}

	/* Invite Link */
	.menu.menuSelect.inviteLinkType { width: var(--menu-width-large); }
	.menu.menuSelect.inviteLinkType {
		.item {
			.icon {
				width: 40px; height: 40px; border-radius: 50%; background-size: 20px;
				background-position: 50% 50%; background-color: var(--color-shape-highlight-medium);
			}
			.icon.editor { background-image: url('~img/icon/menu/inviteLink/editor.svg'); }
			.icon.viewer { background-image: url('~img/icon/menu/inviteLink/viewer.svg'); }
			.icon.manual { background-image: url('~img/icon/menu/inviteLink/manual.svg'); }
			.icon.none { background-image: url('~img/icon/menu/inviteLink/none.svg'); }
		}
	}

	/* Shortcut conflict */
	.menu.menuSelect.shortcutConflict {
		.content { height: unset !important; }
		.menuLabel { padding: 8px 16px 0px; @include text-small; color: var(--color-text-secondary); }
		.menuLabel {
			b { font-weight: 500; }
		}
	}
}
